import React, { useEffect, useMemo, useRef } from "react";
import { ResourceList } from "../../Component/ResourceList";
import { FormattedMessage, useIntl } from "react-intl";
import { LibAppView } from "@/lib";
import { Button, App } from "antd";
import { PlusOutlined } from "@ant-design/icons";
import { AdminRight } from "@/pages/Admin/data/AdminPageAuth";
import { useDelete } from "../../hooks/useDelete";

const SpecialCategory = LibAppView.withService()((props) => {
    const microApp = LibAppView.useMicroApp();
 
    const refApi = useRef<any>(null);
    const deleteAction = useDelete({
        "endPoint": "setting.optionDelete",
        cancelEndPoint: "setting.optionCancel",
        listRef: refApi,
        data: {}
    })
    const columns = useMemo(() => ([{
        title: <FormattedMessage id="admin.pages.setting.options.name" />,
        dataIndex: "name",
        width: 80
    }, {
        title: <FormattedMessage id="admin.pages.setting.options.value" />,
        dataIndex: "dataValue"
    }, {
        title: <FormattedMessage id="admin.pages.operate.edit" />,
        dataIndex: "name",
        render: (name: string, data: any) => {
            return (<>
                <AdminRight authRight="editable" mode="disabled">
                    <Button size="small" onClick={()=>{
                        microApp.startJourney("editSpecialCategory", {
                            state: data
                        });
                    }}>
                        <FormattedMessage id="admin.pages.operate.edit"/>
                    </Button>
                </AdminRight>
                <AdminRight authRight="deleteable" mode="disabled">
                <Button size="small" onClick={() => {
                    deleteAction.delete({
                        ...data,
                        status: -1
                    })
                }}><FormattedMessage id="admin.pages.operate.delete"/></Button>
                </AdminRight>
            </>);
        }
    }]), []);
    const searchFields = useMemo<Admin.IAdvancedField[]>(() => ([{
        label: "配置名称",
        name: "name",
        type: "Input"
    }]), []);
    useEffect(() => {
        microApp.registeJourney({
            name: "editSpecialCategory",
            title: "Edit category",
            stepJourney: true,
            isTempJourney: true,
            steps: [{
                isMemoryPage: true,
                page: "admin.resourceSpecialCategoryEdit"
            }]
        })
    },[]);
    return (
        <ResourceList
            refApi={refApi}
            tableColumns={columns}
            searchFields={searchFields}
            tableWidth={800}
            listEndPoint={{
                endPoint: "setting.configList",
                "formatUri": () => ({
                    config: "specialType"
                })
            }}
            Operators={() => {
                return (<AdminRight authRight="editable" mode="disabled">
                    <Button type="primary" onClick={() => {
                        microApp.startJourney("editSpecialCategory");
                    }}>
                        <PlusOutlined />
                        <span><FormattedMessage id="admin.pages.operate.add" /></span>
                    </Button>
                </AdminRight>);
            }}
        />
    );
});

export default SpecialCategory;
